<template>
	<div class="upload-oss">
		<!-- 非图片 -->
		<div v-if="type!='img' && type!=undefined && !isUeditor">
			<el-input type="text" placeholder="文件地址" v-model='changeFileSrc' style="width: 335px;"></el-input>
			<el-button @click="delFile">清空</el-button>
			<el-button type="primary" @click="clickUpload">选择文件</el-button>
		</div>

		<!-- 图片 -->
		<ul class="list" @click="clickUpload" @dblclick="dblclickUpload" v-if="(type=='img' || type==undefined) && !isUeditor">
			<draggable :list="fileList" 
			:tag="'div'" 
			:handle="sortOptions.handle" 
			:animation="sortOptions.animation" @update="dragEnd">
				<li :class="(item.url != '')?'full':'empty'" v-for="(item, index) in fileList" :key="index">
					<img :src="item.url" v-if='item.url != ""'>
					<span class="icon iconfont icon-close" v-if='item.url != ""' @click.stop="delFile(item, index)"></span>
					<span class="icon iconfont icon-nopic" v-if='item.url == ""'></span>
				</li>
			</draggable>
			<li class="empty" v-for="(item, index) in (limit-fileList.length)" :key="index+10">
				<span class="icon iconfont icon-nopic"></span>
			</li>
		</ul>

		<!-- OSS列表 开始 -->
		<el-dialog title="插入对象" :visible.sync="uploadDialogVisible" width="774px" append-to-body>
			<template>
				<div class="operate">
					<div class="new">
						<el-button @click="list()">刷新</el-button>
						<el-button @click="clickNewDir()">新建目录</el-button>
						<el-button @click="clickLocal()" type="primary">本地上传</el-button>
					</div>
					<div class="search">
						<el-input placeholder="请输入文件名前缀匹配" v-model="searchKey"></el-input>
						<el-button icon="el-icon-search" circle @click="list('search')"></el-button>
					</div>
				</div>
				<el-tabs v-model="activeName" type="card">
					<el-tab-pane label="对象管家" name="list">
						<div class="nav">
							<div class="crumbs" v-html='crumbs' ref='crumbs' id="crumbs"></div>
							<div class="mode">
								<span class="icon iconfont icon-thumbnail-mode" 
								v-if="displayMode == 'list'" title="切换到缩略图模式" 
								@click="handleDisplayMode('thumbnail')"></span>
								<span class="icon iconfont icon-list-mode" 
								v-if="displayMode == 'thumbnail'" title="切换到列表模式" 
								@click="handleDisplayMode('list')"></span>
							</div>
						</div>
						<ul class="list" style="min-height: 45px; max-height: 219px; overflow: auto" 
						v-loading="loading"
						element-loading-text="拼命加载中"
						element-loading-spinner="el-icon-loading" v-if="displayMode == 'thumbnail'">
							<li :class="(checkSelected(item))?'selected':''" 
							v-for="(item, index) in ossList" 
							:key="index" 
							@click="selectObj(item)" :title='item.name'>
								<img :src="item.url" v-if='item.type == "img"'>
								<span class="icon iconfont icon-folder" v-if='item.type == "folder"'></span>
								<span class="icon iconfont icon-package" v-if='item.type == "package"'></span>
								<span class="icon iconfont icon-pdf" v-if='item.type == "pdf"'></span>
								<span class="icon iconfont icon-mp3" v-if='item.type == "mp3"'></span>
								<span class="icon iconfont icon-mp4" v-if='item.type == "mp4"'></span>
								<span class="icon iconfont icon-docx" v-if='item.type == "docx"'></span>
								<span class="icon iconfont icon-ppt" v-if='item.type == "pptx"'></span>
								<span class="icon iconfont icon-xlsx" v-if='item.type == "xlsx"'></span>
								<span class="icon iconfont icon-unknown" v-if='item.type == "unknown"'></span>
								<span class="icon iconfont icon-selected" v-if='checkSelected(item)'></span>
							</li>
						</ul>
						<ul v-if="displayMode == 'list'" class="detailed-list" style="min-height: 45px; max-height: 219px; overflow: auto">
							<li :class="(checkSelected(item))?'selected':''" 
							v-for="(item, index) in ossList" 
							:key="index">
								<span class="icon iconfont icon-folder" v-if='item.type == "folder"'></span>
								<span class="icon iconfont icon-package" v-if='item.type == "package"'></span>
								<span class="icon iconfont icon-pdf" v-if='item.type == "pdf"'></span>
								<span class="icon iconfont icon-mp3" v-if='item.type == "mp3"'></span>
								<span class="icon iconfont icon-mp4" v-if='item.type == "mp4"'></span>
								<span class="icon iconfont icon-docx" v-if='item.type == "docx"'></span>
								<span class="icon iconfont icon-ppt" v-if='item.type == "pptx"'></span>
								<span class="icon iconfont icon-xlsx" v-if='item.type == "xlsx"'></span>
								<span class="icon iconfont icon-thumbnail" v-if='item.type == "img"'></span>
								<span class="icon iconfont icon-unknown" v-if='item.type == "unknown"'></span>
								<span class="icon iconfont icon-selected" v-if='checkSelected(item)'></span>
								<span class="name" v-if='item.type == "folder"' style="cursor: pointer; color: #4c8af2; text-decoration: underline" @click="selectObj(item)">{{ item.name }}</span>
								<span class="name" v-if='item.type != "folder"'>{{ item.name }}</span>
								<span class="size" v-if='item.type != "folder"'>{{ item.size }}</span>
								<span class="choose" @click="selectObj(item)" v-if='item.type != "folder"'>选择</span>
							</li>
						</ul>
						<div style="clear: both"></div>
						<div class="page" v-if="(currPage > 1) || (isTruncated)">
							<span @click="list('prev')" :class="{'disabled': currPage == 1}">&lt; 上一页</span>
							<span @click="list('next')" :class="{'disabled': !isTruncated}">下一页 &gt;</span>
						</div>
					</el-tab-pane>
					
					<div class="uploaded" v-if="(type=='img' || type==undefined)">
						<h6>要插入的对象（{{ uploadList.length }}/{{ limit - fileList.length }}）
							<span class="icon iconfont icon-tuozhuai">可通过拖拽调整对象顺序</span>
							<span style="margin-left: 142px">
								选择尺寸:
								<el-select v-model="selectSize" placeholder="请选择图片尺寸" size="mini">
									<el-option
									v-for="item in imgSize"
									:key="item.size"
									:label="item.label"
									:value="item.size">
									</el-option>
								</el-select>
							</span>
						</h6>
						<draggable class="list" :list="uploadList" 
						:tag="sortOptions.tag" 
						:handle="sortOptions.handle" 
						:animation="sortOptions.animation" @update="dragEnd">
							<li class="full" v-for="(item, index) in uploadList" :key="index+10">
								<!-- 注释原因：使用的下面的image-preview 图片放大 -->
								<!-- <img :src="item.url"> -->
								<el-image 
								:src='item.url'
								:preview-src-list="setEleimage">
								</el-image>
								<span class="icon iconfont icon-close" @click="handleRemove(item, index)"></span>
							</li>
						</draggable>
						<ul class="list">
							<li class="empty" v-for="(item, index) in (limit-fileList.length-uploadList.length)" :key="index+20">
								<span class="icon iconfont icon-nopic"></span>
							</li>
						</ul>
					</div>
					<el-button type="primary" class="insert" @click="insertFile">插入对象</el-button>
				</el-tabs>
				<div class="progress-list" ref="progress" v-if="progressShow">
					<div class="plist">
						<div class="title">
							<span class="t">上传任务</span>
							<span class="el-icon-close" @click='closeProgress'></span>
						</div>
						<div class="info">
							<span class="el-icon-info"></span>
							文件上传过程中，请勿刷新或关闭页面，否则上传任务会被中断且列表会被清空。
						</div>
						<div class="table-title">
							<span class="name">文件名称</span>
							<span class="size">文件大小</span>
							<span class="percentage">状态</span>
							<span class="operate">操作</span>
						</div>
						<div v-for="(item, index) in progress" :key="index">
							<span class="name">{{ item.name }}</span>
							<span class="size" style="color: #bebebe">{{ item.size }}</span>
							<span class="percentage ok">{{ item.percentage }}</span>
							<span class="operate" v-html="item.operate" style="color: #447bd2; cursor: pointer" @click="removeProgressRes(item, index)"></span>
						</div>
					</div>
				</div>
			</template>
		</el-dialog>
		<!-- OSS列表 结束 -->

		<!-- 创建目录 开始 -->
		<el-dialog title="新建目录" :visible.sync="dirDialogVisible" class="new-dir" width="600px" append-to-body>
			<el-form :model="dirForm" :rules="rules" ref="dirForm" label-width="100px">
				<el-form-item label="目录名称" prop="data.newDirName" style="width: 530px;">
					<el-input v-model="dirForm.data.newDirName" placeholder="目录名称" maxlength="254" show-word-limit></el-input>
				</el-form-item>
				<div class="standard">
					目录命名规范：
					<ol decimal type="1">
						<li>不允许使用表情符，请使用符合要求的 UTF-8 字符；</li>
						<li>/ 用于分割路径，可快速创建子目录，但不要以 / 或 \ 开头，不要出现连续的 /；</li>
						<li>不允许出现名为 .. 的子目录；</li>
						<li>总长度控制在 1~254 个字符。</li>
					</ol>
				</div>
			</el-form>
			<div slot="footer" class="dialog-footer">
				<el-button @click="dirDialogVisible = false">取 消</el-button>
				<el-button type="primary" @click="newDir('dirForm')" :disabled='dirForm.submitLock'>
					确 定 <span class="el-icon-loading" v-if='dirForm.submitLock'></span>
				</el-button>
			</div>
		</el-dialog>
		<!-- 创建目录 结束 -->

		<!-- 本地上传 开始 -->
		<el-dialog title="本地上传" :visible.sync="localDialogVisible" class="new-dir" width="600px" append-to-body>
			<el-form label-width="100px">
				<el-form-item label="上传到" style="width: 530px;">
					{{ crumbstxt }}
				</el-form-item>
				<el-form-item label="上传文件" style="width: 530px;">
					<el-upload
					ref="upload"
					class="upload-demo"
					drag
					action
					multiple
					:before-upload="beforeUpload"
					:show-file-list="false"
					:disabled="isdisabled"
					:auto-upload="true"
					:http-request=multipartUpload>
						<i class="el-icon-upload"></i>
						<div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
						<div class="el-upload__tip" slot="tip">只能上传jpg/png文件，且不超过500kb</div>
					</el-upload>
				</el-form-item>
				<div class="standard" style="margin-top: -20px">
					文件命名规范：
					<ol decimal type="1">
						<li>使用 UTF-8 编码；</li>
						<li>区分大小写；</li>
						<li>长度必须在 1~1023 字节之间；</li>
						<li>不能以 / 或者 \ 字符开头。</li>
					</ol>
				</div>
			</el-form>
			<div slot="footer" class="dialog-footer">
				<el-button @click="localDialogVisible = false">取 消</el-button>
			</div>
		</el-dialog>
		<!-- 本地上传 结束 -->
	</div>
</template>

<script>
import {format, convertFileUnit} from "static/js/common.js"
import draggable from 'vuedraggable'
import OSS from 'ali-oss'

let clickTime//单击显示相册选择，双击显示本地上传，此变量为了避免单击、双击冲突
export default {
	/*
	stsdomain 	获取sts的域名
	ossdomain 	oss文件的域名
	appid 		实例ID
	limit 		最多上传多少张图片
	fileList 	已经存在的图片
	maxSize 	文件的最大体积
	field 		父组件需要操作的字段
	type 	 	文件类型 img或空代表上传图片type==file代表上传非图片(如果file=mp4 代表只能上传mp4格式)
	fileSrc 	当type为file时 此处是file的路径
	isUeditor 	是否被ueditor调用
	*/
	props: ['stsdomain', 'ossdomain', 'appid', 'limit', 'fileList', 'maxSize', 'field', 'type', 'fileSrc', 'isUeditor'],
	data() {
		return {
			/*拖拽插件参数*/
			sortOptions: {
				tag:'ul',//拖动句柄
				handle:'.full',//拖动句柄
				animation: 80,//拖拽排序时，动画的多度时长
			},
			selectSize: '750',
			imgSize: [
				{
					'label': '70*70',
					'size': '70',
				},
				{
					'label': '300*300',
					'size': '300',
				},
				{
					'label': '750*750',
					'size': '750',
				},
				{
					'label': '1500*1500',
					'size': '1500',
				},//large_img
				{
					'label': '原始尺寸',
					'size': 'orgin',
				},
			],
			activeName: 'list',//管家选项卡
			loading: false,//相册加载
			progressShow: false,//进度条框 默认不显示
			progress: {
				// 'aaaa': {
				// 	'name': 'center.jpg',
				// 	'size': '10.36MB',
				// 	'percentage': '80%',
				// 	'operate': '移除'
				// }
			},//进度条
			uploadList: [],//上传成功的图片列表
			totalSelect: 0,//每次共选择的数量
			success: 0,//每次上传成功的数量
			fail: 0,//每次上传失败的数量
			/******************************/
			uploadDialogVisible: false,//OSS列表弹框 显示状态
			localDialogVisible: false,//本地上传弹框 显示状态
			dirDialogVisible: false,//新建目录弹框 显示状态
			/*新建目录*/
			dirForm: {
				submitLock: false,
				data: {
					newDirName: ''
				}
			},
			rules: {
				data: {
					newDirName: [
						{ required: true, message: '请输入目录名称', trigger: 'blur' },
						{ min: 1, max: 16, message: '长度在 1 到 16 个字符', trigger: 'blur' }
					]
				}
			},
			searchKey: '',//搜索关键词
			/*从OSS获取的资源列表*/
			ossList: [
				// {
				// 	'name': '',//文件名称
				// 	'type': '',//文件类型 folder(文件夹) package(压缩包) unknown(未知) pdf mp3 doc mp4 ppt xls
				// 	'size': 0,
				// 	'url': '',
				// }
			],
			prefix: '',
			ossArgs: {
				region: 'oss-cn-hangzhou',
				accessKeyId: '',
				accessKeySecret: '',
				stsToken: '',
				bucket: '',
			},
			displayMode: 'thumbnail',//列表展示模式  thumbnail(缩略图模式) list(列表模式)
			isTruncated: true,//列表是否含有下一页
			currPage: 1,
			prevMarker: [],
			nextMarker: '',
			requestLock: false,//请求锁
			maxKeys: 30,//一次显示多少条数据
		};
	},
	components: {
		draggable,
	},
	created: function() {
		this.prefix = this.appid + '/'
		// console.log(this.prefix)
		/*获取临时身份*/
		this.ossArgs = JSON.parse(this.$localstorage.get('ossArgs'))
		let now = Date.parse(new Date())
		if(this.ossArgs == null || now > this.ossArgs.timeout){
			this.getSecurityToken()
		}
	},
	methods: {
		/*获取临时身份*/
		getSecurityToken: function(){
			// console.log(this.$api.securityToken)
			this.$baseURL(this.stsdomain)
			this.$get(this.$api.securityToken).then(res => {
				// console.log(res)
				if(res.data.code === 0){
					if(res.data.data != undefined){
						/*注释原因：放到localstorage里面，没必要每次都加载*/
						// this.ossArgs.region = res.data.data.region
						// this.ossArgs.accessKeyId = res.data.data.Credentials.AccessKeyId
						// this.ossArgs.accessKeySecret = res.data.data.Credentials.AccessKeySecret
						// this.ossArgs.stsToken = res.data.data.Credentials.SecurityToken
						// this.ossArgs.bucket = res.data.data.bucket
						let ossArgs = {
							region: res.data.data.region,
							accessKeyId: res.data.data.Credentials.AccessKeyId,
							accessKeySecret: res.data.data.Credentials.AccessKeySecret,
							stsToken: res.data.data.Credentials.SecurityToken,
							bucket: res.data.data.bucket,
							timeout: Date.parse(new Date()) + 50*60*1000 //50分钟有效期转化成微秒
						}
						this.ossArgs = ossArgs
						this.$localstorage.set('ossArgs', JSON.stringify(ossArgs))
					}
				}
			})
			.catch(err => {})
			.finally(() => {})
		},
		/*
		获取文件列表
		nextMarker从哪个文件开始
		flag prev(点击的上一页)  next(点击下一页)
		*/
		async list (flag = '') {
			if(this.requestLock){
				return
			}
			this.requestLock = true//锁住
			if(this.currPage == 1 && flag == 'prev'){//已经在首页了
				this.requestLock = false
				return
			}
			if(!this.isTruncated && flag == 'next'){//如果没有下一页，且不是点的上一页
				this.requestLock = false
				return
			}
			let dir = this.prefix
			let nextMarker
			if(flag == 'search'){
				dir = this.prefix + this.searchKey
			}
			if(flag == 'prev'){
				nextMarker = this.prevMarker[this.currPage-2]
			}
			if(flag == 'next'){
				nextMarker = this.nextMarker
			}
			try {
				let result;
				let client = new OSS(this.ossArgs);
				result = await client.list({
					'prefix': dir,
					'delimiter': '/',
					'max-keys': this.maxKeys,//一共返回多少个对象
					'marker': nextMarker?nextMarker:dir//从哪个文件开始
				});

				this.isTruncated = result.isTruncated//是否有下一页
				this.nextMarker = result.nextMarker//下一页的标记
				if(flag == ''){//非分页按钮
					this.prevMarker = []
					this.prevMarker[0] = this.prefix
					this.prevMarker[1] = result.nextMarker
					this.currPage = 1
				}
				if(flag == 'prev'){
					this.prevMarker.pop()
					this.currPage--
				}
				if(flag == 'next'){
					this.prevMarker.push(this.nextMarker)
					this.currPage++
				}
				// console.log(this.prevMarker)

				this.ossList = []
				/*遍历文件夹*/
				if(result.prefixes != null){
					result.prefixes.forEach( (subDir) => {
						// console.log('SubDir: %s', subDir);
						let arr = subDir.split('/')
						// console.log(arr[arr.length-2])
						let dir = {
							'name': arr[arr.length-2],
							'type': 'folder',
							'size': 0,
							'url': '',
						}
						this.ossList.push(dir)
					});
				}
				/*遍历对象*/
				if(result.objects != null){
					result.objects.forEach( (obj) => {
						if(obj.name != dir){//排除掉顶级文件名
							// console.log('Object: %s', obj.name);
							/*根据名称后缀判断文件类型*/
							let arr = obj.name.split('.')
							let suffix;//文件后缀
							let type;//文件类型
							if(arr.length >= 2){
								suffix = arr[arr.length-1]
								switch(suffix){//package(压缩包) unknown(未知) pdf mp3 doc mp4 ppt xls
									case 'zip':
										type = 'package'
										break
									case 'rar':
										type = 'package'
										break
									case 'pdf':
										type = 'pdf'
										break
									case 'mp3':
										type = 'mp3'
										break
									case 'mp4':
										type = 'mp4'
										break
									case 'doc':
										type = 'docx'
										break
									case 'docx':
										type = 'docx'
										break
									case 'xls':
										type = 'xlsx'
										break
									case 'xlsx':
										type = 'xlsx'
										break
									case 'ppt':
										type = 'ppt'
										break
									case 'pptx':
										type = 'pptx'
										break
									case 'jpg':
										type = 'img'
										break
									case 'jpeg':
										type = 'img'
										break
									case 'gif':
										type = 'img'
										break
									case 'png':
										type = 'img'
										break
									case 'bmp':
										type = 'img'
										break
									default:
										type = 'unknown'
								}
							}
							arr = obj.name.split('/')
							let dir = {
								'name': arr[arr.length-1],
								'type': type,
								'size': obj.size,
								'url': obj.url,
							}
							this.ossList.push(dir)
						}
					})
				}
				this.requestLock = false//解锁
			} catch (e) {
				console.log(e);
			}
		},
		/*单击上传图片 显示相册管家窗口*/
		clickUpload: function(){
			if(this.limit > this.fileList.length && this.ossArgs.accessKeyId != ''){
				clearTimeout(clickTime)
				clickTime = setTimeout(() => {
					this.displayMode = 'thumbnail'
					this.uploadDialogVisible = !this.uploadDialogVisible
					if(this.ossList.length == 0){
						this.list()
						setTimeout(()=>{
							this.$refs.crumbs.onclick = this.crumbsGoto
						}, 300)
					}
				}, 300);
			}
		},
		/*双击上传图片 显示本地上传窗口*/
		dblclickUpload: function(){
			if(this.limit > this.fileList.length && this.ossArgs.accessKeyId != ''){
				clearTimeout(clickTime)
				clickTime = setTimeout(() => {
					this.displayMode = 'list'
					this.uploadDialogVisible = !this.uploadDialogVisible
					if(this.ossList.length == 0){
						this.list()
						setTimeout(()=>{
							this.$refs.crumbs.onclick = this.crumbsGoto
						}, 300)
					}
				}, 300);

			}
		},
		/*点击创建目录 显示窗口*/
		clickNewDir: function(){
			this.dirDialogVisible = !this.dirDialogVisible
		},
		/*本地上传 显示窗口*/
		clickLocal: function(){
			this.localDialogVisible = !this.localDialogVisible
		},
		/*关闭进度条*/
		closeProgress() {
			this.progressShow = false
		},
		/*创建目录*/
		newDir(formName) {
			if(!this.dirForm.submitLock){
				this.$refs[formName].validate((valid) => {
					if (valid) {
						this.dirForm.submitLock = true;
						// console.log(this.dirForm.data.newDirName)
						let result;
						let client = new OSS(this.ossArgs);
						const data = new OSS.Buffer('');
						try {
							// object-key可以自定义为文件名（例如file.txt）或目录（例如abc/test/file.txt）的形式，实现将文件上传至当前Bucket或Bucket下的指定目录。
							result = client.put(this.prefix + this.dirForm.data.newDirName + '/', data).then((res)=>{
								// console.log(res.res.status)
								if(res.res.status == 200){
									this.list()
									this.dirForm.data.newDirName = ''
									this.dirDialogVisible = false
								}
								this.dirForm.submitLock = false;
							})
							// console.log(result);
						} catch (e) {
							console.log(e);
						}

					} else {
						console.log('error submit!!');
						return false;
					}
				});
			}
		},
		/*对象列表中选择图片*/
		selectObj(file) {
			// console.log(file)
			if(file.type != 'img' && (this.type == 'img' || this.type == null) && file.type != 'folder'){
				this.$message.warning(`请选择图片`)
				return false
			}
			if(file.type == 'img' && (this.type != 'img' && this.type != null) && file.type != 'folder'){
				this.$message.warning(`请选择非图片文件`)
				return false
			}
			if(file.type == 'folder'){//如果是文件夹的话，跳进去
				this.prefix = this.prefix + file.name + '/'
				this.list()
			}else if(file.type == 'img'){
				if(((this.limit - this.fileList.length) - this.uploadList.length) > 0){//判断上传图片是否已满
					/*查看以经上传的列表中，是否已经存在，如果存在去除，如果不存在添加*/
					let has = false//假设不存在
					this.uploadList.forEach((item, index)=>{
						if(item.url == file.url){//存在
							has = true
						}
					})
					/*如果不存在，则追加*/
					if(!has){
						this.uploadList.push(
							{
								'name': file.name,
								'url': file.url
							}
						)
					}
				}
			}else{
				// console.log(file.url)
				this.changeFileSrc = file.url
				this.uploadDialogVisible = false
			}
		},
		/*判断对象列表中的对象是否被选中了*/
		checkSelected(file) {
			// console.log(file)
			let selected = false//假设没有被选中
			this.uploadList.forEach((item, index)=>{
				if(item.url == file.url){//存在
					selected = true
				}
			})
			return selected
		},
		/*切换显示模式*/
		handleDisplayMode(mode) {
			// console.log(mode)
			this.displayMode = mode
		},
		/*面包屑导航跳转*/
		crumbsGoto (event) {
			// console.log(event.target.id)
			let arr = this.prefix.split('/')
			if(event.target.id == '/'){//根目录
				this.prefix = arr[0] + '/'
				this.list()
				return
			}
			if(event.target.id == 'back'){//上级目录
				this.prefix = ''
				for(let i=0; i<arr.length; i++){
					if(i < arr.length-2){
						this.prefix += arr[i] + '/'
					}
				}
				this.list()
				return
			}
			if(event.target.id != 'crumbs'){
				this.prefix = ''
				for(let i=0; i<arr.length; i++){
					this.prefix += arr[i] + '/'
					if(arr[i] == event.target.id){
						break
					}
				}
				this.list()
			}
		},
		/*选择文件后触发*/
		beforeUpload(file) {
			// console.log(file)
			const isJPG = file.type === 'image/jpeg';
			const isGIF = file.type === 'image/gif';
			const isPNG = file.type === 'image/png';
			const isLt2M = file.size / 1024 / 1024 < this.maxSize;
			let pass = true

			if ((this.type == 'img' || this.type == undefined) && (!isJPG && !isGIF && !isPNG)) {
				pass = false
				this.$message.error('只支持 JPG 或 GIF 或 PNG 格式!');
			}
			if (!isLt2M) {
				pass = false
				this.$message.error(`上传大小不能超过 ${this.maxSize} MB!`);
			}
			if(pass){
				this.progressShow = true//显示进度条
				this.localDialogVisible = false//关闭上传组件
			}
			// console.log(file)
			if (this.type == 'img' || this.type == undefined) {
				return (isJPG || isGIF || isPNG) && isLt2M;
			}
		},
		/*分片上传对象*/
		async multipartUpload(option) {
			let result;
			let client = new OSS(this.ossArgs);

			let file = option.file
			const point = file.name.lastIndexOf('.')
			let suffix = file.name.substr(point)
			let fileName = file.name.substr(0, point)
			let date = new Date()
			date = format("YYYYmmddHHMMSS", date)
			let fileNames = `${fileName}_${date}${suffix}`
			// console.log(this.prefix + fileNames, 888)
			// console.log(option, 222)
			let _this = this
			try {
				result = await client.multipartUpload(this.prefix + fileNames, file, { 
					progress: function (p, checkpoint) {
						// 断点记录点。浏览器重启后无法直接继续上传，您需要手动触发上传操作。
						// console.log(this.progress[checkpoint.uploadId])
						// console.log(p, 1111)
						// console.log(checkpoint, 2222)
						// tempCheckpoint = checkpoint;
						if(p == 1 && checkpoint == undefined){
							_this.progress[option.file.uid] = {
								'name': fileNames,
								'size': convertFileUnit(option.file.size),
								'percentage': '上传成功',
								'operate': '移除'
							}
							setTimeout(()=>{
								if(_this.limit > (_this.fileList.length + _this.uploadList.length)){
									_this.uploadList.push(
										{
											'name': fileNames,
											'url': _this.ossdomain + _this.prefix + fileNames
										}
									)
								}
							}, 1000)
							// console.log(file, 88888888888888)
						}
						if(checkpoint != undefined){
							if(_this.progress[checkpoint.uploadId] == undefined){
								_this.progress[checkpoint.uploadId] = {
									'name': fileNames,
									'size': convertFileUnit(checkpoint.fileSize),
									'percentage': 0,
									'operate': '移除'
								}
							}else{
								// console.log(_this.progress[checkpoint.uploadId].percentage, 9999);
								// console.log(_this.progress, 5555);
								let percentage = parseInt(p*100)
								if(percentage == 100){
									percentage = '上传成功'
									if(_this.type == 'img' || _this.type == undefined){//如果是图片，放到预备栏中						
										setTimeout(()=>{
											if(_this.limit > (_this.fileList.length + _this.uploadList.length)){
												_this.uploadList.push(
													{
														'name': fileNames,
														'url': _this.ossdomain + _this.prefix + fileNames
													}
												)
											}
										}, 1000)
									}else{//如果是文件，直接提交父组件并关闭上传组件
										// console.log(_this.ossdomain + _this.prefix + fileNames, 999)
										_this.changeFileSrc = _this.ossdomain + _this.prefix + fileNames
										_this.uploadDialogVisible = false//关闭上传窗口
										_this.uploadFile = ''//清空已经上传的列表
									}

									/*下面是往库里面报错文件信息，其实主要为了券商统计用的 突然感觉个人没必要做了 所以注释了*/
									// let info = {
									// 	'file_name': file.name,
									// 	'file_path': _this.ossdomain + _this.prefix + fileNames,
									// 	'file_type': file.type,
									// 	'file_preview': '',
									// 	'file_size': file.size
									// }
									// this.$baseURL(this.$domain.ac)
									// this.$post(this.$api.saveFileInfo, info).then(res => {
									// 	console.log(res);
									// });
									// console.log(info, 999999999999999)
								}else{
									percentage = percentage + '%'	
								}
								_this.progress[checkpoint.uploadId].percentage = percentage

							}
						}
						_this.$forceUpdate()
					},
					// meta: { time: 2020, people: 'test' },
					// mime: 'image/jpeg'
				})
			} catch(e){
				console.log(e);
			}
		},
		/*拖拽完毕，有排序变化才会触发*/
		dragEnd: function(){
			console.log("拖拽完毕了")
			// console.log(this.uploadList)
			// console.log(this.fileList)
		},
		/*移除进度结果*/
		removeProgressRes: function(item, index){
			this.$delete(this.progress, index)
		},
		/*
		删除已经选择的图片
		*/
		handleRemove(file, index) {
			this.uploadList.splice(index, 1)
			// this.$refs.upload.uploadFiles.splice(index, 1)
		},
		/*插入上传的文件到父组件*/
		insertFile(){
			if(this.type == 'img' || this.type == undefined){
				if(this.uploadList.length == 0){
					this.$message.error('您没有选择或者上传对象!');
				}else{
					/*加OSS处理样式*/
					for(let i=0; i<this.uploadList.length; i++){
						if(this.selectSize != 'orgin'){//非原始尺寸，添加修饰参数
							this.uploadList[i].url = this.uploadList[i].url + '?x-oss-process=style/' + this.selectSize
						}
					}
					// console.log(this.selectSize);
					this.$emit('insertFile', this.uploadList, this.field)//父组件追加上传的图片
					this.uploadDialogVisible = false//关闭上传窗口
					this.uploadList = []//清空已经上传的列表
					// this.$refs.upload.uploadFiles = []//清空队列
				}
			}else{
				if(this.uploadFile == ''){
					this.$message.error('您没有上传文件!');
				}else{
					// this.$emit('insertFile', this.uploadFile, this.field)//父组件追加上传的图片
					this.changeFileSrc = '/' + this.uploadFile
					this.uploadDialogVisible = false//关闭上传窗口
					this.uploadFile = ''//清空已经上传的列表
					// this.$refs.upload.uploadFiles = []//清空队列
				}
			}
		},
		/*删除父组件的文件*/
		delFile(item, index){
			if(this.type == 'img' || this.type == undefined){
				this.$emit('delFile', index, this.field)
			}else{
				this.$emit('delFile', this.field)
			}
		},
	},
	computed: {
		/*是否禁用上传 当数量已经达到最高数的时候，禁止上传按钮触发*/
		isdisabled: function(){
			if((this.fileList.length+this.uploadList.length)>=this.limit){
				return true
			}
			return false
		},
		/*列表 面包屑导航（带触发）*/
		crumbs: function() {
			let crumbs = ''
			let arr = this.prefix.split('/')
			let href = '<a>/</a>'
			for(let i=0; i<arr.length; i++){
				if(i != 0 && arr[i] != ''){
					if(i == 1){
						crumbs = '<a class="icon iconfont icon-ossback" id="back"></a><a id="/">/</a>'
					}
					if(i == arr.length - 2){
						href = arr[i] + '/'
					}else{
						href = '<a id="' + arr[i] + '">' + arr[i] + '/</a>'
					}
					crumbs += href
				}
			}
			// console.log(crumbs)
			return crumbs
		},
		/*列表 面包屑导航(纯文本)*/
		crumbstxt: function() {
			let crumbs = '/'
			let arr = this.prefix.split('/')
			let href = '/'
			for(let i=0; i<arr.length; i++){
				if(i != 0 && arr[i] != ''){
					if(i == arr.length - 2){
						href = arr[i] + '/'
					}else{
						href = arr[i] + '/'
					}
					crumbs += href
				}
			}
			// console.log(crumbs)
			return crumbs
		},
		/*改变文件路径 仅用于非图片*/
		changeFileSrc: {
			get: function () {
				return this.fileSrc
			},
			set: function (val) {
				this.$emit('insertFile', val, this.field)//父组件追加上传的图片
			}
		},
		/*预览大图时，需要整理格式*/
		setEleimage: function() {
			let tmp = []
			for(let i=0; i<this.uploadList.length; i++){
				tmp.push(this.uploadList[i].url)
			}
			return tmp
		}
	}
};
</script>

<style lang="stylus" scoped>
/deep/ .el-dialog__body
	padding: 12px !important
/*右上角操作*/
.operate
	div
		position: relative
		float: right
		z-index: 99
	.search
		margin-right: 5px
	.search>div
		width: 220px
		margin-right: -1px
		float: left
	.search button
		height: 32px
		float: right
	.new>button
		margin-left: 2px
/*面包屑*/
/deep/ .nav
	display: flex
	margin-bottom: 10px
	.crumbs
		flex: 1
		color: #999
		a
			margin-right: 5px
			text-decoration: underline
		a:nth-child(1)
			margin: 0 15px 0 5px
			text-decoration: none
			font-weight: bold
	.mode
		width: 18px
		span
			cursor: pointer
/*分页*/
.page
	line-height: 32px
	text-align: center
	user-select: none
	span
		cursor: pointer
		margin: 0 10px
	span.disabled
		cursor: no-drop
/*列表*/
.list
	display: flex
	flex-wrap: wrap
	/deep/ li
		width: 68px
		height: 68px
		line-height: 64px
		float: left
		text-align: center
		border: #d6d6d6 1px solid
		box-sizing: border-box
		background-position: center
		background-repeat: no-repeat
		background-size: 60%
		margin: 0 5px 5px 0
		cursor: pointer
		position: relative
		.icon-package,.icon-pdf,.icon-mp3,.icon-mp4,.icon-docx,.icon-ppt,.icon-xlsx,.icon-unknown
			font-size: 40px
		.icon-folder
			font-size: 45px
		&.selected
			border: #ff7300 1px solid
			box-sizing: inherit
			.icon-selected
				color: #ff7300
				line-height: 16px
				position: absolute
				font-size: 16px
				right: -1px
				bottom: 0px
		&.full
			cursor: move
			span
				display: block
				width: 15px
				height: 15px
				position: absolute
				right: 0
				bottom: 0
				background: #fff
			span:before
				display: block
				line-height: 15px
				font-size: 13px
			span:hover
				color: red
				cursor: pointer
		&.empty
			span:before
				color: #979797
		img
			max-width: 64px
			max-height: 64px
			vertical-align: middle
/*详情模式列表*/
.detailed-list
	li
		line-height: 32px
		display: flex
		span
			display: block
		span.iconfont
			width: 32px
		span.name
			flex: 1
		span.size
			width: 100px
			text-align: left
		span.choose
			width: 40px
			padding-right: 10px
			text-align: right
			cursor: pointer
			user-select: none
		.icon-folder,.icon-package,.icon-pdf,.icon-mp3,.icon-mp4,.icon-docx,.icon-ppt,.icon-xlsx,.icon-thumbnail,.icon-unknown
			font-size: 22px
		.icon-folder
			font-size: 24px
	li:hover
		background: #fafafa
/*新建目录*/
.new-dir
	.standard		
		font-size: 12px
		margin-left: 100px
		color: #8f8f8f
		ol
			margin-left: 16px
		li
			display: list-item
			list-style-type: decimal
			line-height: 22px
	/deep/ .el-input__count-inner
		width: 58px
		text-align: right
		margin-right: -5px
/*已经选择的文件*/
.uploaded
	h6
		width: 100%
		border-top: 1px solid #ccc
		padding: 15px 0
		font-size: 14px
		display: inline-block
		line-height: 24px
		vertical-align: top
		span
			margin-left: 10px
			font-weight: normal
	width: 100%
	display: block
	overflow: hidden
	ul
		float: left
/*重置上传组件*/
/deep/ .el-upload-dragger
	border-radius: 0px
	width: 430px
/deep/ .el-upload__tip
	display: none
	
.insert
	margin-top: 15px
	width: 750px
/*上传进度*/
.progress-list
	background-color: rgba(0, 0, 0, .3)
	position: absolute
	top: 0
	left: 0
	padding: 25px 15px
	width: 100%
	height: 100%
	border-box: box-sizing
	z-index: 100
	.plist
		background: #fff
		width: 80%
		margin: 0 auto
		max-height: 100%
		padding: 0 15px 15px 15px
		overflow: auto
		font-size: 12px
		padding-top: 70px
		.title
			height: 62px
			line-height: 62px
			width: 558px
			padding: 0
			font-size: 16px
			position: fixed
			top: 172px
			display: flex
			background: #fff
			border-bottom: #ebebeb 1px solid
			span
				display: block
				line-height: 62px
			span.t
				flex: 1
				text-align: left
			span.el-icon-close
				width: 30px
			span.el-icon-close:before
				cursor: pointer
		div.table-title
			background: #fafafa
			border: #ebebeb 1px solid
		div.info
			background: #e7f3ff
			line-height: 32px
			margin-bottom: 10px
			span
				margin: 0 10px
				font-size: 16px
				color: #326ece
				margin-top: 8px
		div
			display: flex
			padding: 5px
			span
				text-align: center
				display: inline-block
			span.name
				flex: 1
				text-align: left
			span.size
				width: 100px
			span.percentage
				width: 100px
			span.ok
				color: #62a45d
			span.operate
				width: 50px
				text-align: right
	.el-progress__text
		display: none
.icon-folder
	color: #e2b31b
.icon-package
	color: #979a9c
.icon-pdf
	color: #ae4227
.icon-mp3
	color: #e36d00
.icon-mp4
	color: #603e8b
.icon-docx
	color: #507dff
.icon-ppt
	color: #e34d19
.icon-xlsx
	color: #3f9f50
.icon-thumbnail
	color: #4db2cd
.icon-unknown
	color: #707376

/*图片放大需要的迭代样式*/
/deep/ .el-image__inner
	width: auto
	height: auto
/deep/ .el-image-viewer__btn
	display: run-in !important
	width: 44px !important
	height: 44px !important
	right: 40px !important
	background-color: #606266 !important
/deep/ .el-image-viewer__btn:hover
	color: #fff !important
/deep/ .el-icon-arrow-left, /deep/ .el-icon-arrow-right
	position: absolute
	left: 10px
	top: 10px
/deep/ .el-image-viewer__close
	background-color: transparent !important
/deep/ .el-image-viewer__actions
	width: 282px !important
</style>